<template>
    <div
        class="mb-15 search-container"
        :class="manageType == '质控点标准值维护情况' ? 'flex-start' : ''"
    >
        <div class="select-list sl-l flex">
            <div
                v-show="
                    manageType == '目标标准模板维护情况' ||
                        manageType == '执行进度分析' ||
                        manageType == '质控点预警及处理情况' ||
                        manageType == '质控点执行状态采集情况'
                "
                class="pt-10"
            >
                <span>层面</span>
                <el-select
                    class="mx-15 level"
                    popper-class="pop-select"
                    size="mini"
                    v-model="searchQuery.indexX"
                    @change="changeAngle"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in levelOptions"
                        :key="i"
                        :label="item.dashboardDetailName"
                        :value="item.dashboardDetailCode"
                    >
                    </el-option>
                </el-select>
            </div>
            <div
                v-show="
                    manageType == '目标标准模板维护情况' ||
                        manageType == '执行进度分析' ||
                        manageType == '质控点预警及处理情况' ||
                        manageType == '质控点执行状态采集情况'
                "
                class="pt-10"
            >
                <span>角度</span>
                <el-select
                    class="mx-15"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.rectificationRangeId"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item, i) in angleOptions"
                        :key="i"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div v-show="manageType == '目标标准模板维护情况'" class="pt-10">
                <span>状态</span>
                <el-select
                    class="mx-15"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.state"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in tepstatusOptions"
                        :key="i"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div
                v-show="
                    manageType == '诊改报告' &&
                        indexCode != 'jys' &&
                        indexCode != 'bzr'
                "
                class="pt-10"
            >
                <span>报告类型</span>
                <el-select
                    class="mx-15 w-175"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.reportType"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in reportTypeOption"
                        :key="i"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div
                v-show="
                    manageType == '诊改报告' &&
                        indexCode != 'jys' &&
                        indexCode != 'bzr'
                "
                class="pt-10"
            >
                <span>编制部门</span>
                <el-select
                    class="mx-15"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.writeDepartment"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in belongPartOptions"
                        :key="i"
                        :label="item.orgName"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div v-show="manageType == '诊改报告'" class="pt-10">
                <span>{{
                    indexCode == "bzr" ? "所属学院" : "归属二级学院"
                }}</span>
                <el-select
                    class="mx-15 w-175"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.belongTwoLevelSchool"
                    @change="getClassOrTeachReswarch"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in collegelist"
                        :key="i"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div
                v-show="
                    manageType == '诊改报告' &&
                        (indexCode == 'jys' || indexCode == 'bzr')
                "
                class="pt-10"
            >
                <span>{{
                    indexCode == "jys" ? "所属教研室" : "所属班级"
                }}</span>
                <el-select
                    class="mx-15 w-175"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.classId"
                    @change="getTearchersOrStudents"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in belongClassOption"
                        :key="i"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div
                v-show="
                    manageType == '诊改报告' &&
                        (indexCode == 'jys' || indexCode == 'bzr')
                "
                class="pt-10"
            >
                <span>{{ indexCode == "jys" ? "教师姓名" : "学生姓名" }}</span>
                <el-select
                    class="mx-15 w-175"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.studentId"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in studentTeacherOption"
                        :key="i"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div
                v-show="
                    manageType == '诊改报告' &&
                        (indexCode == 'jys' || indexCode == 'bzr')
                "
                class="pt-10"
            >
                <span>编写状态</span>
                <el-select
                    class="mx-15 w-175"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.editStatus"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in editStatusOption"
                        :key="i"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div
                v-show="
                    manageType == '执行进度分析' ||
                        manageType == '质控点执行状态采集情况'
                "
                class="pt-10 target"
            >
                <span>目标标准</span>
                <el-input
                    class="w-155 mx-15 my-input"
                    clearable
                    v-model.trim="searchQuery.name"
                    placeholder="请输入目标标准"
                ></el-input>
            </div>
            <div
                v-show="
                    (indexCode != 'jys' &&
                        indexCode != 'bzr' &&
                        manageType == '诊改报告') ||
                        manageType == '执行进度分析' ||
                        manageType == '质控点预警及处理情况' ||
                        manageType == '质控点执行状态采集情况'
                "
                class="pt-10"
            >
                <span>诊改对象</span>
                <el-input
                    class="w-155 mx-15 my-input"
                    clearable
                    v-model.trim="searchQuery.objectName"
                    placeholder="请输入诊改对象"
                ></el-input>
            </div>
            <div
                v-show="
                    manageType == '执行进度分析' ||
                        manageType == '质控点预警及处理情况' ||
                        manageType == '质控点执行状态采集情况'
                "
                class="pt-10"
            >
                <span>归属部门</span>
                <el-select
                    class="mx-15 level"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.belongPart"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in belongPartOptions"
                        :key="i"
                        :label="item.orgName"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div v-show="manageType == '质控点执行状态采集情况'" class="pt-10">
                <span>数据采集状态</span>
                <el-select
                    class="mx-15"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.dataStatus"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in dataStatusOptions"
                        :key="i"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div v-show="manageType == '质控点预警及处理情况'" class="pt-10">
                <span>预警状态</span>
                <el-select
                    class="mx-15"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.warningStatus"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in statusOptions"
                        :key="i"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div
                v-show="
                    indexCode != 'jys' &&
                        indexCode != 'bzr' &&
                        manageType == '诊改报告'
                "
                class="pt-10"
            >
                <span>编写情况</span>
                <el-select
                    class="mx-15"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.writeInfo"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="(item,i) in writeStatusOptions"
                        :key="i"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <!-- <div v-show="indexCode != 'jys' && indexCode != 'bzr' && indexCode !='zlzx' && manageType == '诊改报告'" class="pt-10">
                <span>完成进度</span>
                <el-select
                    class="mx-15"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.finishProgress"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div> -->
            <!-- <div v-show="indexCode != 'jys' && indexCode != 'bzr' &&manageType == '诊改报告'" class="pt-10">
                <span>归属专业</span>
                <el-select
                    class="mx-15"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.belongProfession"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div> -->
            <div
                class="btn-list pt-10"
                :class="manageType == '目标标准模板维护情况' ? 'btn-right' : ''"
            >
                <el-button
                    v-show="manageType != '质控点标准值维护情况'"
                    data-none-border
                    size="mini"
                    popper-class="pop-select"
                    @click="search('search')"
                    type="primary"
                    >查询</el-button
                >
                <el-button
                    data-btn
                    size="mini"
                    v-show="
                        manageType != '质控点标准值维护情况' &&
                            (indexCode != 'jys' || indexCode != 'bzr')
                    "
                    @click="reset"
                    >重置</el-button
                >
                <el-button
                    data-btn
                    size="mini"
                    :loading="downloading"
                    v-show="manageType != '质控点标准值维护情况'"
                    @click="downLoad"
                    >下载</el-button
                >
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import {
    queryAll,
    getClassList,
    getTeachingResearchList,
    getStudentTeacherList
} from '@/api/cockpit';

export default {
    name: 'Searchner',
    props: {
        manageType: {
            required: true,
            type: String,
            default: ''
        },
        reportWidth: {
            required: false,
            type: [String, Number],
            default: ''
        }
    },
    computed: {
        ...mapState({
            collegelist: state => state.cockpit.collegelist,
            levelOptions: state => state.cockpit.levelOptions,
            // 归属部门组
            belongPartOptions: state => state.cockpit.belongPartOptions,
            indexCode: state => state.cockpit.indexCode
        })
    },
    data () {
        return {
            angleOptions: [],
            tepstatusOptions: [
                {
                    value: 0,
                    label: '未编辑'
                },
                {
                    value: 1,
                    label: '已下发'
                }
            ],
            writeStatusOptions: [
                {
                    value: 0,
                    label: '未编写'
                },
                {
                    value: 1,
                    label: '未审核'
                },
                {
                    value: 2,
                    label: '已审核'
                }
            ],
            statusOptions: [
                {
                    value: 0,
                    label: '未预警'
                },
                {
                    value: 1,
                    label: '预警中'
                },
                {
                    value: 2,
                    label: '关闭预警'
                }
            ],
            dataStatusOptions: [
                {
                    value: 0,
                    label: '未完成'
                },
                {
                    value: 2,
                    label: '已完成'
                }
            ],
            reportTypeOption: this.common.reportTypeOption,
            // 查询对象
            searchQuery: {
                // 层面code码
                indexX: null,
                // 模板标准or执行进度角度id
                rectificationRangeId: null,
                // 目标标准状态
                state: null,
                // 进度or数据采集 目标标准
                name: null,
                // 进度or预警 诊改对象
                objectName: null,
                // 进度归属部门
                belongPart: null,
                // 报告类型
                reportType: null,
                // 编制部门
                writeDepartment: null,
                // 归属二级学院
                belongTwoLevelSchool: null,
                // 编写情况
                writeInfo: null,
                // 归属专业
                belongProfession: null,
                // 预警状态
                warningStatus: null,
                // 状态数据采集情况
                dataStatus: null,
                // 完成进度
                finishProgress: null,
                // 教研室or班主任驾驶舱 所属班级/教研室ID
                classId: null,
                // 教研室or班主任驾驶舱 老师/学生
                studentId: null,
                // 教研室or班主任驾驶舱 编写状态
                editStatus: null
            },
            editStatusOption: [
                {
                    label: '未编写',
                    value: 0
                },
                {
                    label: '未审核',
                    value: 1
                },
                {
                    label: '已审核',
                    value: 2
                }
            ],
            //  老师/学生组
            studentTeacherOption: [],
            //  教研室组or班级组
            belongClassOption: [],
            // 重置查询参数
            resetQuery: null,
            downFileType: 'init',
            downloading: false
        };
    },
    created () {
        this.resetQuery = { ...this.searchQuery };
    },
    methods: {
        init () {},
        // isSearch: 'search' 为查询参数 ，'init' 为初始参数,'echart' 为echarts查询参数
        search (isSearch) {
            this.$emit(
                'handleSearch',
                this.searchQuery,
                isSearch,
                this.manageType
            );
        },
        changeAngle (val) {
            // this.$store.commit('cockpit/SET_TABLECODE', val);
            this.searchQuery.rectificationRangeId = null;
            queryAll({
                indexX: val,
                pageIndex: 1,
                pageSize: 100
            }).then(res => {
                // console.log(res, 'changeAngle');
                this.angleOptions = res;
            });
        },
        reset () {
            this.searchQuery = { ...this.resetQuery };
            // console.log(this.searchQuery, '=====');
            this.search('init');
        },
        resetQueryParam () {
            this.searchQuery = { ...this.resetQuery };
        },
        downLoad () {
            this.downloading = true;
            this.$emit('downloadFile');
        },
        // 获取教研室or班级组
        getClassOrTeachReswarch (val) {
            this.searchQuery.classId = null;
            this.searchQuery.studentId = null;
            if (this.indexCode === 'jys') {
                getTeachingResearchList({ orgId: val }).then(res => {
                    this.belongClassOption = res || [];
                });
            } else {
                getClassList({ orgId: val }).then(res => {
                    this.belongClassOption = res || [];
                });
            }
        },
        // 老师/学生组
        getTearchersOrStudents (val) {
            this.searchQuery.studentId = null;
            getStudentTeacherList({ orgId: val }).then(res => {
                this.studentTeacherOption = res || [];
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.search-container {
    flex-wrap: wrap;
    span {
        color: #fff;
    }
    ::v-deep .el-select {
        .el-input__inner {
            width: 128px;
            height: 32px;
            font-size: 14px;
            color: #9da5b7;
        }
    }
    .el-button[data-new-btn] {
        background: #169bd5;
        border: none;
    }
    .el-select[data-select] {
        margin-top: 15px;
    }
    .flex {
        flex-wrap: wrap;
    }
    .btn-right {
        flex-basis: 48.5%;
        text-align: right;
        margin-left: 25px;
    }
    ::v-deep .level {
        .el-input__inner {
            width: 173px !important;
        }
    }
}
.w-155 {
    width: 155px;
}
.w-175 {
    width: 175px;
    background: #04214e;
    ::v-deep .el-input__inner {
        padding-right: 0;
        width: 175px !important;
    }
}
::v-deep .el-input--small .el-input__inner {
    height: 32px !important;
    font-size: 14px;
}
::v-deep .my-input {
    .el-input__suffix {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
